<template>
  <el-card class="box-card fix-el-card" shadow="hover">
    <div id="customerChart" class="transportMonitoringMap"></div>
  </el-card>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";

let myChart: any = null;

// 文件在 public 目录中
var uploadedDataURL = "./china.json";
// 圆圈，颜色是圆点的颜色，线的颜色在下面配置
var points = [
  { value: [118.8062, 31.9208], itemStyle: { color: "#b9be23" } },
  // { value: [127.9688, 45.368], itemStyle: { color: "#4fb6d2" } },
  { value: [110.3467, 41.4899], itemStyle: { color: "#b9be23" } },
  { value: [125.8154, 44.2584], itemStyle: { color: "#b9be23" } },
  // { value: [116.4551, 40.2539], itemStyle: { color: "#f34e2b" } },
  { value: [123.1238, 42.1216], itemStyle: { color: "#b9be23" } },
  // { value: [114.4995, 38.1006], itemStyle: { color: "#f56f1c" } },
  { value: [117.4219, 39.4189], itemStyle: { color: "#b9be23" } },
  { value: [112.3352, 37.9413], itemStyle: { color: "#b9be23" } },
  // { value: [109.1162, 34.2004], itemStyle: { color: "#f5a305" } },
  // { value: [103.5901, 36.3043], itemStyle: { color: "#e7ab0b" } },
  // { value: [106.3586, 38.1775], itemStyle: { color: "#dfae10" } },
  { value: [101.4038, 36.8207], itemStyle: { color: "#b9be23" } },
  // { value: [103.9526, 30.7617], itemStyle: { color: "#c1bb1f" } },
  { value: [108.384366, 30.439702], itemStyle: { color: "#b9be23" } },
  { value: [113.0823, 28.2568], itemStyle: { color: "#b9be23" } },
  { value: [102.9199, 25.46639], itemStyle: { color: "#b9be23" } },
  { value: [110.47354, 19.94698] },
];
// 110.47354, 19.94698
onMounted(() => {
  initChart();
});

const initChart = () => {
  const chartDiv = document.getElementById("customerChart");
  myChart = echarts.init(chartDiv);
  //     myChart.showLoading();
  axios.get(uploadedDataURL).then((geoJson: any) => {
    echarts.registerMap("china", geoJson.data);

    myChart.hideLoading();
    let option = {
      backgroundColor: "#013954",

      geo: {
        map: "china",
        aspectScale: 0.75, //长宽比
        zoom: 1.1,
        roam: false,
        itemStyle: {
          normal: {
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "#09132c", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#274d68", // 100% 处的颜色
                },
              ],
              globalCoord: true, // 缺省为 false
            },
            shadowColor: "rgb(58,115,192)",
            shadowOffsetX: 10,
            shadowOffsetY: 11,
          },
          emphasis: {
            areaColor: "#2AB8FF",
            borderWidth: 0,
            color: "green",
            label: {
              show: false,
            },
          },
        },
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              areaColor: "rgba(0, 10, 52, 1)",

              borderColor: "rgba(0, 10, 52, 1)",
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                },
              },
            },
          },
        ],
      },
      series: [
        {
          type: "map",
          roam: false,
          mapType: "china",
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#1DE9B6",
              },
            },
            emphasis: {
              textStyle: {
                color: "rgb(183,185,14)",
              },
            },
          },

          itemStyle: {
            normal: {
              borderColor: "rgb(147, 235, 248)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
            },
            emphasis: {
              areaColor: "rgb(46,229,206)",
              //    shadowColor: 'rgb(12,25,50)',
              borderWidth: 0.1,
            },
          },
          zoom: 1.1,
          //     roam: false,
          map: "china", //使用
          // data: this.difficultData //热力图数据   不同区域 不同的底色
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          showEffectOn: "render",
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: "fill",
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: "#1DE9B6",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "#1DE9B6" /* function (value){ //随机颜色
 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
 }*/,
              shadowBlur: 100,
              shadowColor: "#333",
            },
          },
          // 圆圈点的尺寸
          symbolSize: 8,
          data: points,
        }, //地图线的动画效果
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 0, //图标大小
          },
          lineStyle: {
            normal: {
              color: "#1DE9B6",
              width: 3, //线条宽度
              opacity: 0.9, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: [
            {
              coords: [
                [110.47354, 19.94698],
                [118.8062, 31.9208],
              ],
              lineStyle: { color: "#b9be23" },
            },
            // {
            //   coords: [
            //     [110.47354, 19.94698],
            //     [127.9688, 45.368],
            //   ],
            //   lineStyle: { color: "#4fb6d2" },
            // },
            {
              coords: [
                [110.47354, 19.94698],
                [110.3467, 41.4899],
              ],
              lineStyle: { color: "#b9be23" },
            },
            {
              coords: [
                [110.47354, 19.94698],
                [125.8154, 44.2584],
              ],
              lineStyle: { color: "#b9be23" },
            },
            // {
            //   coords: [
            //     [110.47354, 19.94698],
            //     [116.4551, 40.2539],
            //   ],
            //   lineStyle: { color: "#f34e2b" },
            // },
            {
              coords: [
                [110.47354, 19.94698],
                [123.1238, 42.1216],
              ],
              lineStyle: { color: "#b9be23" },
            },
            // {
            //   coords: [
            //     [110.47354, 19.94698],
            //     [114.4995, 38.1006],
            //   ],
            //   lineStyle: { color: "#f56f1c" },
            // },
            {
              coords: [
                [110.47354, 19.94698],
                [117.4219, 39.4189],
              ],
              lineStyle: { color: "#f58414", width: 5 },
            },
            {
              coords: [
                [110.47354, 19.94698],
                [112.3352, 37.9413],
              ],
              lineStyle: { color: "#b9be23" },
            },
            // {
            //   coords: [
            //     [110.47354, 19.94698],
            //     [109.1162, 34.2004],
            //   ],
            //   lineStyle: { color: "#f5a305" },
            // },
            // {
            //   coords: [
            //     [110.47354, 19.94698],
            //     [103.5901, 36.3043],
            //   ],
            //   lineStyle: { color: "#e7ab0b" },
            // },
            {
              coords: [
                [110.47354, 19.94698],
                [106.3586, 38.1775],
              ],
              lineStyle: { color: "#b9be23" },
            },
            {
              coords: [
                [110.47354, 19.94698],
                [101.4038, 36.8207],
              ],
              lineStyle: { color: "#b9be23" },
            },
            // {
            //   coords: [
            //     [110.47354, 19.94698],
            //     [103.9526, 30.7617],
            //   ],
            //   lineStyle: { color: "#c1bb1f" },
            // },
            {
              coords: [
                [110.47354, 19.94698],
                [108.384366, 30.439702],
              ],
              lineStyle: { color: "#b9be23" },
            },
            {
              coords: [
                [110.47354, 19.94698],
                [113.0823, 28.2568],
              ],
              lineStyle: { color: "#b9be23" },
            },
            {
              coords: [
                [110.47354, 19.94698],
                [102.9199, 25.46639],
              ],
              lineStyle: { color: "#b9be23" },
            },
          ],
        },
      ],
    };
    myChart.setOption(option, true);
    myChart.resize();
  });
};
</script>
<style lang="scss" scoped>
.el-card {
  border-radius: 0;
  border: none;
}
// Uncaught DOMException: CanvasRenderingContext2D.drawImage: Passed-in canvas is empty
// 报错是在绘制图形时画布大小为0
.transportMonitoringMap {
  width: 855px;
  height: 746px;
}
</style>
